<script lang="ts" setup>
import type { Article } from '~/utils/api/article-api';

interface Props {
	article: Article;
}

defineProps<Props>();
</script>

<template>
	<NuxtLink :to="`/article/${article.article_id}`">
		<Card class="w-full rounded-2xl overflow-hidden shadow bg-white">
			<img
				v-if="article.cover_src"
				:src="article.cover_src"
				alt="cover"
				class="aspect-video object-cover w-full h-full"
				onerror=""
			>
			<div class="flex flex-col gap-3 p-4 break-all">
				<div class="flex gap-3 text-sm font-normal text-slate-500">
					<span>{{ article.categories.map(item => item.category_name).join('/') }}</span>
					<span>·</span>
					<span>{{ useDateFormat(article.update_date, 'YYYY-MM-DD').value }}</span>
				</div>
				<div class="flex flex-col gap-1.5">
					<h1 class="text-[1.375rem] font-medium line-clamp-2 text-slate-900">
						{{ article.article_title }}
					</h1>
					<h2 class="text-sm font-medium text-slate-700">
						{{ article.article_description }}
					</h2>
				</div>
				<ArticleAuthor :author="article.author" />
			</div>
		</Card>
	</NuxtLink>
</template>

<style scoped>

</style>
